<script setup>
import { reactive, ref } from "vue";
 
let bannerBox = reactive({
  tabIndex: 1,
  testHeight:500,
});
 
 
//点击菜单栏，滚动滚动条
const testRef = ref();
const changeTabIndex = (Index) => {
  let scrollTop = bannerBox.testHeight * (Index - 1)
  testRef.value.setScrollTop(scrollTop)

};
 
//滚动时，切换菜单栏
const doScroll = (event)=>{
  let scrollTop = event.scrollTop;
  let index = Math.floor( ( (scrollTop + bannerBox.testHeight) *100 ) / (bannerBox.testHeight * 100) )
  bannerBox.tabIndex = index;
  console.log(scrollTop)

}
 
</script>
 
<template>
  <main>
    <div class="test">
      <div class="test_header">
        <div class="test_header_1" @click="changeTabIndex(1)"  :class="{active:bannerBox.tabIndex == 1}">测试1</div>
        <div class="test_header_1" @click="changeTabIndex(2)"  :class="{active:bannerBox.tabIndex == 2}">测试2</div>
        <div class="test_header_1" @click="changeTabIndex(3)"  :class="{active:bannerBox.tabIndex == 3}">测试3</div>
        <div class="test_header_1" @click="changeTabIndex(4)"  :class="{active:bannerBox.tabIndex == 4}">测试4</div>
        <div class="test_header_1" @click="changeTabIndex(5)"  :class="{active:bannerBox.tabIndex == 5}">测试5</div>
      </div>
      <div class="test_content">
        <div class="test_content_box">
          <el-scrollbar ref="testRef" @scroll="doScroll">
            <div class="test_box_item bg1">1</div>
            <div class="test_box_item bg2">2</div>
            <div class="test_box_item bg3">3</div>
            <div class="test_box_item bg4">4</div>
            <div class="test_box_item bg5">5</div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </main>
</template>
<style scoped lang="less">
//隐藏滚动条
::-webkit-scrollbar{
  width: 0;
}
//样式穿透，隐藏滚动条
:deep(.el-scrollbar__bar.is-vertical){
  width:0;
}
.test {
  position: relative;
  div {
    // border: 1px solid;
  }
  .active{
    background:brown;
  }
  .test_header {
    background: #ffffff;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    .test_header_1 {
      width: 20%;
    }
  }
  .test_content {
    background: green;
    height: 500px;
    position: relative;
 
    .test_content_box {
      overflow: auto;
      height: 500px;
      // width: 400px;
      position: absolute;
      width:100%;
      color:#fff;
      // display: flex;
      // flex-direction: column;
      right: 0;
 
      .test_box_item {
        height: 500px;
        // width: 400px;
        background: yellow;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      .bg1{
        background:#f83303;
      }
      .bg2{
        background:pink;
      }
      .bg3{
        background:black;
      }
      .bg4{
        background:blue;
      }
      .bg5{
        background:green;
      }
    }
  }
}
</style>